<template>
	<view class="tabs">
		<view v-for="item in arr" :key="item.id" class="tab" @click="change(item.id)" @mouseenter="change2(item.id)"
			@mouseleave="change3(item.id)">
			<image :src="item.active?item.img2:item.img1" alt="">
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				arr: [{
						id: 1,
						text: "烟感报警器",
						active: true,
						flag: 1,
						img1: '/static/hright-tab1.png',
						img2: '/static/hright-tab11.png',
						system: 'fc_system_wxgy'
					},
					{
						id: 2,
						text: "可燃气体报警器",
						active: false,
						flag: 0,
						img1: '/static/hright-tab2.png',
						img2: '/static/hright-tab22.png',
						system: 'fc_system_krqt'
					},
					{
						id: 3,
						text: "消防用水报警器",
						active: false,
						flag: 0,
						img1: '/static/hright-tab3.png',
						img2: '/static/hright-tab33.png',
						system: 'fc_system_xfys'
					},
				]
			}
		},
		mounted() {
			this.$emit('hright1-title', this.arr[0].text, this.arr[0].system)
		},
		methods: {
			change(id) {
				// 点击事件，排他，并传递参数渲染页面
				this.arr.forEach(i => {
					if (i.id === id) {
						i.active = true
						i.flag = 1
						this.$emit('hright1-title', i.text, i.system)
					} else {
						i.active = false
						i.flag = 0
					}
				})
			},
			change2(id) {
				// 鼠标移入，高亮
				this.arr.forEach(i => {
					if (i.id === id) {
						if (!i.active) {
							i.active = true
						}
					}
				})
			},
			change3(id) {
				this.arr.forEach(i => {
					if (i.id === id) {
						if (i.flag === 0) {
							i.active = false
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tab {
		margin-bottom: 14px;
		cursor: pointer;

		image {
			width: 45px;
			height: 45px;
		}
	}
</style>